<template>
  <div>
    <!--面包屑导航区域-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>群组管理</el-breadcrumb-item>
      <el-breadcrumb-item>创建群组</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card class="box-card">
      <!--搜索与添加区域-->
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input v-model="addForm.name" placeholder="请输入群组名称"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="createIfVisible(addForm.name,addForm.description)">确认群组信息</el-button>
        </el-col>
        <el-row :span="3" style="margin-top: 4%;margin-left: 0.8%;margin-right: 0.8%">
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入群组描述"
            width="60%"
            v-model="addForm.description">
          </el-input>
        </el-row>
        <el-col :span="7" style="margin-top: 1.5%;">
          <el-input placeholder="请输入答者名称" v-model="queryInfo.query" clearable @clear="getAnswerList()">
            <el-button slot="append" icon="el-icon-search" @click="getAnswerList()"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!--用户列表区域-->
<!--      <el-table ref="multipleTable" :data="showAnswerList" highlight-current-row-->
      <el-table ref="multipleTable" :data="showAnswerList" highlight-current-row
                 @selection-change="handleSelectionChange" @row-click = "onRowClick" border stripe>
        <el-table-column label="#" type="selection">
        </el-table-column>
        <el-table-column label="#" type="index">
        </el-table-column>
        <el-table-column label="答者id" prop="id">
        </el-table-column>
        <el-table-column label="答者账号" prop="username">
        </el-table-column>
        <el-table-column label="答者名称" prop="name">
        </el-table-column>
        <el-table-column label="手机号码" prop="phone">
        </el-table-column>
        <el-table-column label="邮箱" prop="email">
        </el-table-column>
      </el-table>
      <!--分页区域-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="answertotal">
      <!--        :total="total">-->
<!--        注意这里 因为没有total属性 用-->
      </el-pagination>
    </el-card>

    <el-dialog
      title="确认群组信息" :visible.sync="createDialogVisible"
      width="30%"
      @close="createDialogClosed">
      <!--内容主体区域-->
      <el-form :model="addForm" label-width="70px" ref="editFormRef">
        <el-form-item label="群组名称" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            type="textarea"
            :rows="6"
            width="60%"
            v-model="addForm.description">
          </el-input>
        </el-form-item>
      </el-form>
      <!--底部区域-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="createDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGroup">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
  return {
    createDialogVisible: false,
    currentRowIndex: 1,
    // 已选中的校色id值
    selectedRoleId: '',
    queryInfo: {
      query: '',
      // 当前的页数
      pagenum: 1,
      pagesize: 5
    },
    // 答者列表信息
    addForm: {
      userId: '',
      name: '',
      description: '',
      status: ''
    },
    answerlist: [
      {
        angroupid: '20204566',
        answerid: '1234',
        answername: '张洞洞租',
        phone: '13188723672',
        email: '55588832@qq.com'
      },
      {
        angroupid: '20204566',
        answerid: '1234',
        answername: '张洞洞租',
        phone: '13188723672',
        email: '55588832@qq.com'
      },
      {
        angroupid: '20204566',
        answerid: '1234',
        answername: '张洞洞租',
        phone: '13188723672',
        email: '55588832@qq.com'
      },
      {
        angroupid: '20204566',
        answerid: '1234',
        answername: '张洞洞租',
        phone: '13188723672',
        email: '55588832@qq.com'
      },
      {
        angroupid: '20204566',
        answerid: '1234',
        answername: '张洞洞租',
        phone: '13188723672',
        email: '55588832@qq.com'
      }],
    answertotal: 1,
    showAnswerList: [],
    multipleSelection: [],
    forChangeGroupId: {
      id: '',
      groupId: ''
    }
    }
  },
  created () {
    this.getAnswerList()
  },
  methods: {
    // 点击按钮，添加新群组
      addGroup () {
      const ids = []
      for (let i = 0; i < this.multipleSelection.length; i++) {
        ids[i] = this.multipleSelection[i].id
      }
      if (ids.length > 0) {
        this.addForm.status = 0
      } else {
        this.addForm.status = 1
      }
      const listTemp = []
      this.addForm.userId = this.Global.globalUser.globalID
      this.$http.post('/groups/addChange', this.addForm).then((response) => {
        this.$message.success('添加群组成功')
        // 隐藏对话框
        this.createDialogVisible = false
        console.log(response.data)
        for (let i = 0; i < this.multipleSelection.length; i++) {
          // console.log(response.data)
          // this.forChangeGroupId.id = this.multipleSelection[i].id
          // this.forChangeGroupId.groupId = response.data.data
          const temp = {
            id: '',
            groupId: ''
          }
          temp.id = this.multipleSelection[i].id
          temp.groupId = response.data.data
          listTemp.push(temp)
          // console.log('shuchu:'+response.data.data[i].groupId)
        }
        console.log(listTemp)
        return listTemp
      }).then((listTemp) => {
        console.log(listTemp)
        for (let i = 0; i < listTemp.length; i++) {
          this.changeGroupId(listTemp[i])
        }
      })
    },
     changeGroupId (listTemp) {
       return this.$http.put('/user/edit', listTemp)
    },
    // 监听添加用户对话框的关闭事件
    addDialogClosed () {
      this.$refs.addFormRef.resetFields()
    },
    // 处理选中的答者
    handleSelectionChange (val) {
      this.multipleSelection = val
    },

// 监听pageSize改变的事件
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getAnswerList()
    },
    // 监听页码值改变的事件
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getAnswerList()
    },

    tableRowClassName ({ row, rowIndex }) {
      row.row_index = rowIndex
    },
    onRowClick (row, event, column) {
      this.currentRowIndex = row.row_index
    },
    async createIfVisible (groupname, discription) {
      if (groupname === '' || discription === '') {
        this.$message.error('请完善您的群组信息')
      } else {
        this.createDialogVisible = true
      }
    },

    createDialogClosed () {
      // 对表单字段内容重置
      this.$refs.editFormRef.resetFields()
    },
    getAnswerList () {
      this.$http.get('user/list', {
        params: {
          auth: 4,
          used: 1,
          superId: this.Global.globalUser.globalID
        }
      }).then((response) => {
        this.showAnswerList = []
        let len = response.data.data.length
        const searchAnswerList = []
        for (let i = 0; i < len; i++) {
          const answer = response.data.data[i]
          if (this.queryInfo.query !== '') {
            if (answer.name.indexOf(this.queryInfo.query) !== -1) {
              searchAnswerList.push(answer)
            }
          } else {
            searchAnswerList.push(answer)
          }
        }
        // 获取对应的记录列表
        const start = (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize
        len = searchAnswerList.length
        for (let i = 0; i < len; i++) {
          if (i >= start && i < start + this.queryInfo.pagesize) {
            const answer = searchAnswerList[i]
            this.showAnswerList.push(answer)
          }
        }
        this.answertotal = searchAnswerList.length
      })
    }
  }
}
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}
</style>
